<template>
    <SideBar>
        <template #left>
            <div v-if="showSideBar" class="fire_lt">
                <Headline>楼内危险态势</Headline>
                <div class="fire_lt_echarts">
                    <PieEcharts3D :seriesData="peopleRegionData" :currentStep="currentStep"></PieEcharts3D>
                </div>
            </div>
            <div v-if="showSideBar" class="fire_lb">
                <Headline>火灾态势</Headline>
                <SmallTitle tips="楼宇内部火势蔓延速度">蔓延速度</SmallTitle>
                <div class="fire_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="m/s" :seriesData="spreadSeriesData" tipLabel="蔓延速度"
                        areaColorFrom="rgba(65, 179, 255, 0.9)"></LineEcharts>
                </div>
                <SmallTitle tips="火焰在楼宇内燃烧蔓延的总面积">覆盖范围</SmallTitle>
                <div class="fire_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="㎡" :seriesData="convergeSeriesData" tipLabel="覆盖范围"
                        areaColorFrom="rgba(83, 230, 177, 0.9)"></LineEcharts>
                </div>
                <SmallTitle tips="楼宇内的烟雾总浓度">烟雾浓度</SmallTitle>
                <div class="fire_lb_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="m³" :seriesData="smokeSeriesData" tipLabel="烟雾浓度"
                        areaColorFrom="rgba(206, 206, 64, 0.9)"></LineEcharts>
                </div>
            </div>
        </template>
        <template #right>
            <div v-if="showSideBar" class="fire_rt">
                <Headline>疏散情况</Headline>
                <SmallTitle tips="楼道单位空间内聚集的人员密集程度">汇聚比</SmallTitle>
                <div class="fire_rt_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="collectSeriesData" tipLabel="汇聚比"
                        areaColorFrom="rgba(65, 179, 255, 0.9)" areaColorTo="rgba(65, 179, 255, 0)" :fixed="3">
                    </LineEcharts>
                </div>
                <SmallTitle tips="疏散过程中人员逃生状态反映的恐慌程度">恐慌指数</SmallTitle>
                <div class="fire_rt_echarts">
                    <LineEcharts :xAxisData="xAxisData" yUnit="次" :seriesData="panicSeriesData" tipLabel="恐慌指数"
                        areaColorFrom="rgba(83, 230, 177, 0.9)" areaColorTo="rgba(65, 179, 255, 0)" :fixed="2">
                    </LineEcharts>
                </div>
            </div>
            <div v-if="showSideBar" class="fire_rb">
                <Headline>受害情况</Headline>
                <SmallTitle tips="火灾场景各楼层人员伤亡统计">人口伤亡</SmallTitle>
                <div class="fire_rb_echarts">
                    <CylinderEcharts :xAxisData="casualtyXAxisData" :seriesData="peopleSeriesData"
                        :currentStep="currentStep" :fixed="0" unit="人"></CylinderEcharts>
                </div>
                <SmallTitle tips="火灾场景各楼层房屋过火总面积">楼栋损毁</SmallTitle>
                <div class="fire_rb_echarts">
                    <CylinderEcharts :xAxisData="casualtyXAxisData" :cylinderWidth="cylinderWidth"
                        :seriesData="buildingSeriesData" :currentStep="currentStep" :fixed="0" unit="㎡">
                    </CylinderEcharts>
                </div>
                <SmallTitle tips="火灾场景各楼层房屋损毁总面积">房屋损毁</SmallTitle>
                <div class="fire_rb_echarts">
                    <CylinderEcharts :xAxisData="casualtyXAxisData" :seriesData="houseSeriesData"
                        :currentStep="currentStep" :fixed="0" unit="㎡"></CylinderEcharts>
                </div>
            </div>
        </template>
    </SideBar>
    <div class="option_setting">
        <ConfigBtn :status="showSQ" @click="openDialog"></ConfigBtn>
        <Start v-if="hasPutFireSource" @click="startSimulate">开始模拟</Start>
    </div>
    <UDialog v-model:visible="dialogVisible" title="模拟配置" @confirm="confirmHandle" @close="closeHandle"
        @cancel="closeHandle">
        <div class="form_item">
            <div class="label">火灾等级：</div>
            <UCheckbox v-model="fireLevel" :options="fireOptions" single></UCheckbox>
        </div>
        <div class="form_item">
            <div class="label">响应措施：</div>
            <UCheckbox v-model="deviceType" :options="deviceOptions"></UCheckbox>
        </div>
    </UDialog>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref, watch, onUnmounted, computed } from 'vue';
import { getStat } from "@/api/fire"
import UCheckbox from '@/components/UCheckbox.vue';
import { useStore } from '@/stores';
import { setIntervalExc } from "@/utils/index";
const store = useStore();
const { proxy } = getCurrentInstance();
const bus = proxy.$bus;
const showSideBar = computed(() => store.showSidebar);
const dialogVisible = ref(false);
const deviceType = ref('');
const deviceOptions = ref([
    { label: '自动消防装置', value: 'spray' },
    { label: '烟雾报警器', value: 'alarm' }
]);
const fireLevel = ref('');
const fireOptions = ref([
    { label: '一般火情', value: '1' },
    { label: '严重火情', value: '2' }
]);
const showSQ = ref(false);
const hasSetSimOptions = ref(false);//是否已经设置了模拟配置
const hasPutFireSource = ref(false);//是否已经放置了火源

const peopleRegionData = ref([]);//人群危险态势
const xAxisData = ref([]);
const spreadSeriesData = ref([]);//蔓延速度数据
const convergeSeriesData = ref([]);//覆盖范围数据
const smokeSeriesData = ref([]);//烟雾浓度数据
const collectSeriesData = ref([]);//汇聚比数据
const panicSeriesData = ref([]);//恐慌指数数据
const currentStep = ref(0)

const isPlaying = ref(false);

const casualtyXAxisData = ref([]);
const cylinderWidth = ref(20);
const peopleSeriesData = ref([]);//人口伤亡
const buildingSeriesData = ref([]);//楼栋损毁
const houseSeriesData = ref([]);//房屋损毁

onMounted(() => {
    bus.on("quitPlaceingStatus", () => {
        hasPutFireSource.value = true;
    });
    bus.on("firePlaying", args => {
        firePlaying(args);//监听模拟中事件
    });
    bus.on("stopPlaying", () => {
        isPlaying.value = false;
    });
})
onUnmounted(() => {
    bus.off('firePlaying');
});
watch(() => hasSetSimOptions.value, (newVal) => {
    if (newVal) {
        // let fireBuildingNum = 13;//放置火源的楼栋编号，宜剩是13号楼，湖口29号楼，杏园5号楼
        // let currentVillage = store.village;
        // if (currentVillage == '杏园小区') {
        //     fireBuildingNum = 5;
        // } else if (currentVillage == '湖口小区') {
        //     fireBuildingNum = 29;
        // } else {
        //     fireBuildingNum = 13;
        // }
        ElMessage({
            // message: '请在' + fireBuildingNum + '号楼设置着火点位',
            message: '请设置着火点位',
            type: 'warning',
            showClose: true,
            duration: 3000
        })
    }
});
/**
 * 打开模拟配置弹窗
 */
function openDialog() {
    if (isPlaying.value) {
        proxy.$toast("模拟进行中");
        return;
    }
    showSQ.value = true;
    dialogVisible.value = true;
}
/**
 * 开始模拟
 */
function startSimulate() {
    bus.emit('startSimulation');
    hasPutFireSource.value = false;
    deviceType.value = '';
    fireLevel.value = '';
    hasSetSimOptions.value = false;
    store.setShowSidebar(true);
}
/**
 * 火灾模拟中
 */
const firePlaying = (args) => {
    if (!showSideBar.value) {
        store.setShowSidebar(true);
        store.setShowToolbar(false);
    }
    //获取火点数据
    getStatData(args);
    if (args.step == args.totalSteps - 1) {
        isPlaying.value = false;
    } else {
        isPlaying.value = true;
    }
}
/**
 * 获取火点数据
 * @param {*} args 
 */
const getStatData = (args) => {
    if (!args['isPlaying']) {
        return;
    }
    currentStep.value = args['step'];
    const param = {
        begin: args['step'] - 1,
        end: args['step'],
        interval: 1,
        num_points: args['step'],
        point_interval: 1,
    }
    setIntervalExc(args, () => {
        getStat(args['id'], param).then(res => {
            if (res && res.length > 0) {
                const value = res[0];
                const step = value['step'];
                const fire_info = value['fire_info'];
                const crowd_info = value['crowd_info'];

                spreadSeriesData.value = fire_info['spread_speed'];//蔓延速度
                convergeSeriesData.value = fire_info['coverage'];//覆盖范围
                smokeSeriesData.value = fire_info['smoke_level'];//烟雾浓度
                collectSeriesData.value = fire_info['gather_level'];//汇聚比
                panicSeriesData.value = fire_info['panic_level'];//恐慌指数
                let xAxisArr = [];
                let xAxisCount = spreadSeriesData.value.length;
                for (let index = 0; index < xAxisCount; index++) {
                    xAxisArr.push(index + step);
                }
                xAxisData.value = xAxisArr;

                const regional_distribution = crowd_info['regional_distribution'];//人群危险态势
                peopleSeriesData.value = crowd_info['casualties'];//人口伤亡
                buildingSeriesData.value = crowd_info['building_damage'];//楼栋损毁
                houseSeriesData.value = crowd_info['house_damage'];//房屋损毁
                let xAxisCrowdArr = [];
                let xAxisCrowdCount = peopleSeriesData.value.length;
                for (let index = 0; index < xAxisCrowdCount; index++) {
                    xAxisCrowdArr.push((index + 1) + '楼');
                }
                casualtyXAxisData.value = xAxisCrowdArr;

                setPeopleRegionData(regional_distribution);
            }
        });
    });
}
/**
 * 设置人群危险态势数据
 * @param regional_distribution 
 */
function setPeopleRegionData(regional_distribution) {
    peopleRegionData.value = [
        {
            name: '安全区域',
            value: regional_distribution[3],
            color: '#53E6B1'
        },
        {
            name: '高危区域',
            value: regional_distribution[0],
            color: '#C45200'
        },
        {
            name: '中危区域',
            value: regional_distribution[1],
            color: '#C28409'
        },
        {
            name: '低危区域',
            value: regional_distribution[2],
            color: '#CECE40'
        },
        {
            name: '其他',
            value: regional_distribution[4],
            color: '#096DD9'
        }
    ]
}
/**
 * 设置模拟配置
 */
function confirmHandle() {
    // if (!deviceType.value) {
    //     proxy.$toast("请选择火灾预案！")
    //     return;
    // }
    if (!fireLevel.value) {
        proxy.$toast("请选择火灾等级！")
        return;
    }
    let deviceTypeValue = deviceType.value;
    if (deviceType.value instanceof Array) {
        deviceTypeValue = deviceType.value.join(',');
    }
    bus.emit("putFireDevice", deviceTypeValue);
    bus.emit("putFire", fireLevel.value);
    dialogVisible.value = false;
    hasSetSimOptions.value = true;
    showSQ.value = false;
}
function closeHandle() {
    showSQ.value = false;
}
</script>


<style scoped lang="scss">
.fire_lt {
    width: 100%;
    height: 29.5%;

    .fire_lt_echarts {
        width: 100%;
        height: calc(100% - 100 / var(--fsize) * 1rem);
    }
}

.fire_lb {
    width: 100%;
    height: 70.5%;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;

    .fire_lb_echarts {
        width: 100%;
        flex: 1;
    }
}




// 右上角样式
.fire_rt {
    height: 41%;
    display: flex;
    flex-direction: column;

    .fire_rt_echarts {
        width: 100%;
        flex: 1;
    }
}

/* 右下角图表样式 */
.fire_rb {
    height: 59%;
    display: flex;
    flex-direction: column;
    padding-bottom: 30px;

    .fire_rb_echarts {
        width: 100%;
        flex: 1;
    }
}

:deep(.form_item .label) {
    width: 140px;
}
</style>
